    <layout class="app-state-wizard">
        <div class="view-steps">
            <div class="background-box"></div>
            <div class="steps_icon" @click="handleClick('PRE')"><i class="el-icon-arrow-left"></i></div>
            <el-steps class="wizard-steps"  :active="(wizardForms.indexOf(activeForm) + 1)" finish-status="success" align-center>
                <el-step :class="{'app-active-step':activeForm==='statewizardpanel_form_draft'?true:false}">
                    <template v-slot:title>
                        <div v-popover:statewizardpanel_form_draft_popover @click="hanleClick('statewizardpanel_form_draft')">
                            <span><i v-if="activeForm != 'statewizardpanel_form_draft' && !historyForms.includes('statewizardpanel_form_draft')" class="el-icon-lock"></i>草稿</span>
                        </div>
                    </template>
                </el-step>
                <el-step :class="{'app-active-step':activeForm==='statewizardpanel_form_ongoing'?true:false}">
                    <template v-slot:title>
                        <div v-popover:statewizardpanel_form_ongoing_popover @click="hanleClick('statewizardpanel_form_ongoing')">
                            <span><i v-if="activeForm != 'statewizardpanel_form_ongoing' && !historyForms.includes('statewizardpanel_form_ongoing')" class="el-icon-lock"></i>正在进行</span>
                        </div>
                    </template>
                </el-step>
                <el-step :class="{'app-active-step':activeForm==='statewizardpanel_form_in_progress'?true:false}">
                    <template v-slot:title>
                        <div v-popover:statewizardpanel_form_in_progress_popover @click="hanleClick('statewizardpanel_form_in_progress')">
                            <span><i v-if="activeForm != 'statewizardpanel_form_in_progress' && !historyForms.includes('statewizardpanel_form_in_progress')" class="el-icon-lock"></i>已确认</span>
                        </div>
                    </template>
                </el-step>
                <el-step :class="{'app-active-step':activeForm==='statewizardpanel_form_open'?true:false}">
                    <template v-slot:title>
                        <div v-popover:statewizardpanel_form_open_popover @click="hanleClick('statewizardpanel_form_open')">
                            <span><i v-if="activeForm != 'statewizardpanel_form_open' && !historyForms.includes('statewizardpanel_form_open')" class="el-icon-lock"></i>出价选择</span>
                        </div>
                    </template>
                </el-step>
                <el-step :class="{'app-active-step':activeForm==='statewizardpanel_form_done'?true:false}">
                    <template v-slot:title>
                        <div v-popover:statewizardpanel_form_done_popover @click="hanleClick('statewizardpanel_form_done')">
                            <span><i v-if="activeForm != 'statewizardpanel_form_done' && !historyForms.includes('statewizardpanel_form_done')" class="el-icon-lock"></i>已关闭</span>
                        </div>
                    </template>
                </el-step>
                <el-step :class="{'app-active-step':activeForm==='statewizardpanel_form_cancel'?true:false}">
                    <template v-slot:title>
                        <div v-popover:statewizardpanel_form_cancel_popover @click="hanleClick('statewizardpanel_form_cancel')">
                            <span><i v-if="activeForm != 'statewizardpanel_form_cancel' && !historyForms.includes('statewizardpanel_form_cancel')" class="el-icon-lock"></i>已取消</span>
                        </div>
                    </template>
                </el-step>
            </el-steps>
            <div class="steps_icon" @click="handleClick('NEXT')"><i class="el-icon-arrow-right"></i></div>
        </div>
        <el-popover v-model="stepVisiable['statewizardpanel_form_draft']" ref="statewizardpanel_form_draft_popover" popper-class="app-state-wizard-popover-container" placement="bottom-start" trigger="click">
            <div class="app-state-wizard-container">
                <div class="app-state-wizard-header">
                    <div class="app-state-wizard-header-extra">
                        <Icon type="md-open" size="18" @click="handleOPen('statewizardpanel_form_draft')"/>
                        <Icon type="md-close" size="18" @click="handleClose('statewizardpanel_form_draft')"/>
                    </div>
                </div>
                <div class="popover-title">wizard</div>
                <div class="app-state-wizard-content">
                    <view_statewizardpanel_form_draft
                    :key="'statewizardpanel_form_draft'" 
                    :viewState='wizardState'
                    :context="context"
                    :viewparams="viewparams"
                    updateAction="Get"
                    removeAction=""
                    loadAction="Get"
                    @save="statewizardpanel_form_draft_save" 
                    @load="statewizardpanel_form_draft_load" 
                    name='statewizardpanel_form_draft' 
                    ref='statewizardpanel_form_draft'>
                    </view_statewizardpanel_form_draft>
                </div>
                <div class="app-state-wizard-footer">
                    <i-button  v-if="isVisiable('statewizardpanel_form_draft','PREV')" @click="onClickPrev('statewizardpanel_form_draft')" ><Icon type="ios-arrow-back"></Icon></i-button>
                    <i-button  v-if="isVisiable('statewizardpanel_form_draft','NEXT')" @click="onClickNext('statewizardpanel_form_draft')" type="primary" long>{{$t('app.wizardPanel.next')}}</i-button>
                    <i-button  v-if="isVisiable('statewizardpanel_form_draft','FINISH')" @click="onClickFinish('statewizardpanel_form_draft')" type="primary" long>{{$t('app.wizardPanel.complete')}}</i-button>
                </div>
            </div>
        </el-popover>
        <drawer class="app-state-wizard-drawer" :closable="false"  :value="drawerOpenStatus.isOpen && drawerOpenStatus.formName == 'statewizardpanel_form_draft'"
        :width="600"  title="wizard" @on-visible-change="onVisibleChange($event)">
            <view_statewizardpanel_form_draft
            :key="'statewizardpanel_form_draft'" 
            :viewState='wizardState'
            :context="context"
            :viewparams="viewparams"
            updateAction="Get"
            removeAction=""
            loadAction="Get"
            @save="statewizardpanel_form_draft_save" 
            @load="statewizardpanel_form_draft_load" 
            name='statewizardpanel_form_draft' 
            ref='statewizardpanel_form_draft'>
            </view_statewizardpanel_form_draft>
        </drawer>
        <el-popover v-model="stepVisiable['statewizardpanel_form_ongoing']" ref="statewizardpanel_form_ongoing_popover" popper-class="app-state-wizard-popover-container" placement="bottom-start" trigger="click">
            <div class="app-state-wizard-container">
                <div class="app-state-wizard-header">
                    <div class="app-state-wizard-header-extra">
                        <Icon type="md-open" size="18" @click="handleOPen('statewizardpanel_form_ongoing')"/>
                        <Icon type="md-close" size="18" @click="handleClose('statewizardpanel_form_ongoing')"/>
                    </div>
                </div>
                <div class="popover-title">wizard</div>
                <div class="app-state-wizard-content">
                    <view_statewizardpanel_form_ongoing
                    :key="'statewizardpanel_form_ongoing'" 
                    :viewState='wizardState'
                    :context="context"
                    :viewparams="viewparams"
                    updateAction="Get"
                    removeAction=""
                    loadAction="Get"
                    @save="statewizardpanel_form_ongoing_save" 
                    @load="statewizardpanel_form_ongoing_load" 
                    name='statewizardpanel_form_ongoing' 
                    ref='statewizardpanel_form_ongoing'>
                    </view_statewizardpanel_form_ongoing>
                </div>
                <div class="app-state-wizard-footer">
                    <i-button  v-if="isVisiable('statewizardpanel_form_ongoing','PREV')" @click="onClickPrev('statewizardpanel_form_ongoing')" ><Icon type="ios-arrow-back"></Icon></i-button>
                    <i-button  v-if="isVisiable('statewizardpanel_form_ongoing','NEXT')" @click="onClickNext('statewizardpanel_form_ongoing')" type="primary" long>{{$t('app.wizardPanel.next')}}</i-button>
                    <i-button  v-if="isVisiable('statewizardpanel_form_ongoing','FINISH')" @click="onClickFinish('statewizardpanel_form_ongoing')" type="primary" long>{{$t('app.wizardPanel.complete')}}</i-button>
                </div>
            </div>
        </el-popover>
        <drawer class="app-state-wizard-drawer" :closable="false"  :value="drawerOpenStatus.isOpen && drawerOpenStatus.formName == 'statewizardpanel_form_ongoing'"
        :width="600"  title="wizard" @on-visible-change="onVisibleChange($event)">
            <view_statewizardpanel_form_ongoing
            :key="'statewizardpanel_form_ongoing'" 
            :viewState='wizardState'
            :context="context"
            :viewparams="viewparams"
            updateAction="Get"
            removeAction=""
            loadAction="Get"
            @save="statewizardpanel_form_ongoing_save" 
            @load="statewizardpanel_form_ongoing_load" 
            name='statewizardpanel_form_ongoing' 
            ref='statewizardpanel_form_ongoing'>
            </view_statewizardpanel_form_ongoing>
        </drawer>
        <el-popover v-model="stepVisiable['statewizardpanel_form_in_progress']" ref="statewizardpanel_form_in_progress_popover" popper-class="app-state-wizard-popover-container" placement="bottom-start" trigger="click">
            <div class="app-state-wizard-container">
                <div class="app-state-wizard-header">
                    <div class="app-state-wizard-header-extra">
                        <Icon type="md-open" size="18" @click="handleOPen('statewizardpanel_form_in_progress')"/>
                        <Icon type="md-close" size="18" @click="handleClose('statewizardpanel_form_in_progress')"/>
                    </div>
                </div>
                <div class="popover-title">wizard</div>
                <div class="app-state-wizard-content">
                    <view_statewizardpanel_form_in_progress
                    :key="'statewizardpanel_form_in_progress'" 
                    :viewState='wizardState'
                    :context="context"
                    :viewparams="viewparams"
                    updateAction="Get"
                    removeAction=""
                    loadAction="Get"
                    @save="statewizardpanel_form_in_progress_save" 
                    @load="statewizardpanel_form_in_progress_load" 
                    name='statewizardpanel_form_in_progress' 
                    ref='statewizardpanel_form_in_progress'>
                    </view_statewizardpanel_form_in_progress>
                </div>
                <div class="app-state-wizard-footer">
                    <i-button  v-if="isVisiable('statewizardpanel_form_in_progress','PREV')" @click="onClickPrev('statewizardpanel_form_in_progress')" ><Icon type="ios-arrow-back"></Icon></i-button>
                    <i-button  v-if="isVisiable('statewizardpanel_form_in_progress','NEXT')" @click="onClickNext('statewizardpanel_form_in_progress')" type="primary" long>{{$t('app.wizardPanel.next')}}</i-button>
                    <i-button  v-if="isVisiable('statewizardpanel_form_in_progress','FINISH')" @click="onClickFinish('statewizardpanel_form_in_progress')" type="primary" long>{{$t('app.wizardPanel.complete')}}</i-button>
                </div>
            </div>
        </el-popover>
        <drawer class="app-state-wizard-drawer" :closable="false"  :value="drawerOpenStatus.isOpen && drawerOpenStatus.formName == 'statewizardpanel_form_in_progress'"
        :width="600"  title="wizard" @on-visible-change="onVisibleChange($event)">
            <view_statewizardpanel_form_in_progress
            :key="'statewizardpanel_form_in_progress'" 
            :viewState='wizardState'
            :context="context"
            :viewparams="viewparams"
            updateAction="Get"
            removeAction=""
            loadAction="Get"
            @save="statewizardpanel_form_in_progress_save" 
            @load="statewizardpanel_form_in_progress_load" 
            name='statewizardpanel_form_in_progress' 
            ref='statewizardpanel_form_in_progress'>
            </view_statewizardpanel_form_in_progress>
        </drawer>
        <el-popover v-model="stepVisiable['statewizardpanel_form_open']" ref="statewizardpanel_form_open_popover" popper-class="app-state-wizard-popover-container" placement="bottom-start" trigger="click">
            <div class="app-state-wizard-container">
                <div class="app-state-wizard-header">
                    <div class="app-state-wizard-header-extra">
                        <Icon type="md-open" size="18" @click="handleOPen('statewizardpanel_form_open')"/>
                        <Icon type="md-close" size="18" @click="handleClose('statewizardpanel_form_open')"/>
                    </div>
                </div>
                <div class="popover-title">wizard</div>
                <div class="app-state-wizard-content">
                    <view_statewizardpanel_form_open
                    :key="'statewizardpanel_form_open'" 
                    :viewState='wizardState'
                    :context="context"
                    :viewparams="viewparams"
                    updateAction="Get"
                    removeAction=""
                    loadAction="Get"
                    @save="statewizardpanel_form_open_save" 
                    @load="statewizardpanel_form_open_load" 
                    name='statewizardpanel_form_open' 
                    ref='statewizardpanel_form_open'>
                    </view_statewizardpanel_form_open>
                </div>
                <div class="app-state-wizard-footer">
                    <i-button  v-if="isVisiable('statewizardpanel_form_open','PREV')" @click="onClickPrev('statewizardpanel_form_open')" ><Icon type="ios-arrow-back"></Icon></i-button>
                    <i-button  v-if="isVisiable('statewizardpanel_form_open','NEXT')" @click="onClickNext('statewizardpanel_form_open')" type="primary" long>{{$t('app.wizardPanel.next')}}</i-button>
                    <i-button  v-if="isVisiable('statewizardpanel_form_open','FINISH')" @click="onClickFinish('statewizardpanel_form_open')" type="primary" long>{{$t('app.wizardPanel.complete')}}</i-button>
                </div>
            </div>
        </el-popover>
        <drawer class="app-state-wizard-drawer" :closable="false"  :value="drawerOpenStatus.isOpen && drawerOpenStatus.formName == 'statewizardpanel_form_open'"
        :width="600"  title="wizard" @on-visible-change="onVisibleChange($event)">
            <view_statewizardpanel_form_open
            :key="'statewizardpanel_form_open'" 
            :viewState='wizardState'
            :context="context"
            :viewparams="viewparams"
            updateAction="Get"
            removeAction=""
            loadAction="Get"
            @save="statewizardpanel_form_open_save" 
            @load="statewizardpanel_form_open_load" 
            name='statewizardpanel_form_open' 
            ref='statewizardpanel_form_open'>
            </view_statewizardpanel_form_open>
        </drawer>
        <el-popover v-model="stepVisiable['statewizardpanel_form_done']" ref="statewizardpanel_form_done_popover" popper-class="app-state-wizard-popover-container" placement="bottom-start" trigger="click">
            <div class="app-state-wizard-container">
                <div class="app-state-wizard-header">
                    <div class="app-state-wizard-header-extra">
                        <Icon type="md-open" size="18" @click="handleOPen('statewizardpanel_form_done')"/>
                        <Icon type="md-close" size="18" @click="handleClose('statewizardpanel_form_done')"/>
                    </div>
                </div>
                <div class="popover-title">wizard</div>
                <div class="app-state-wizard-content">
                    <view_statewizardpanel_form_done
                    :key="'statewizardpanel_form_done'" 
                    :viewState='wizardState'
                    :context="context"
                    :viewparams="viewparams"
                    updateAction="Get"
                    removeAction=""
                    loadAction="Get"
                    @save="statewizardpanel_form_done_save" 
                    @load="statewizardpanel_form_done_load" 
                    name='statewizardpanel_form_done' 
                    ref='statewizardpanel_form_done'>
                    </view_statewizardpanel_form_done>
                </div>
                <div class="app-state-wizard-footer">
                    <i-button  v-if="isVisiable('statewizardpanel_form_done','PREV')" @click="onClickPrev('statewizardpanel_form_done')" ><Icon type="ios-arrow-back"></Icon></i-button>
                    <i-button  v-if="isVisiable('statewizardpanel_form_done','NEXT')" @click="onClickNext('statewizardpanel_form_done')" type="primary" long>{{$t('app.wizardPanel.next')}}</i-button>
                    <i-button  v-if="isVisiable('statewizardpanel_form_done','FINISH')" @click="onClickFinish('statewizardpanel_form_done')" type="primary" long>{{$t('app.wizardPanel.complete')}}</i-button>
                </div>
            </div>
        </el-popover>
        <drawer class="app-state-wizard-drawer" :closable="false"  :value="drawerOpenStatus.isOpen && drawerOpenStatus.formName == 'statewizardpanel_form_done'"
        :width="600"  title="wizard" @on-visible-change="onVisibleChange($event)">
            <view_statewizardpanel_form_done
            :key="'statewizardpanel_form_done'" 
            :viewState='wizardState'
            :context="context"
            :viewparams="viewparams"
            updateAction="Get"
            removeAction=""
            loadAction="Get"
            @save="statewizardpanel_form_done_save" 
            @load="statewizardpanel_form_done_load" 
            name='statewizardpanel_form_done' 
            ref='statewizardpanel_form_done'>
            </view_statewizardpanel_form_done>
        </drawer>
        <el-popover v-model="stepVisiable['statewizardpanel_form_cancel']" ref="statewizardpanel_form_cancel_popover" popper-class="app-state-wizard-popover-container" placement="bottom-end" trigger="click">
            <div class="app-state-wizard-container">
                <div class="app-state-wizard-header">
                    <div class="app-state-wizard-header-extra">
                        <Icon type="md-open" size="18" @click="handleOPen('statewizardpanel_form_cancel')"/>
                        <Icon type="md-close" size="18" @click="handleClose('statewizardpanel_form_cancel')"/>
                    </div>
                </div>
                <div class="popover-title">wizard</div>
                <div class="app-state-wizard-content">
                    <view_statewizardpanel_form_cancel
                    :key="'statewizardpanel_form_cancel'" 
                    :viewState='wizardState'
                    :context="context"
                    :viewparams="viewparams"
                    updateAction="Get"
                    removeAction=""
                    loadAction="Get"
                    @save="statewizardpanel_form_cancel_save" 
                    @load="statewizardpanel_form_cancel_load" 
                    name='statewizardpanel_form_cancel' 
                    ref='statewizardpanel_form_cancel'>
                    </view_statewizardpanel_form_cancel>
                </div>
                <div class="app-state-wizard-footer">
                    <i-button  v-if="isVisiable('statewizardpanel_form_cancel','PREV')" @click="onClickPrev('statewizardpanel_form_cancel')" ><Icon type="ios-arrow-back"></Icon></i-button>
                    <i-button  v-if="isVisiable('statewizardpanel_form_cancel','NEXT')" @click="onClickNext('statewizardpanel_form_cancel')" type="primary" long>{{$t('app.wizardPanel.next')}}</i-button>
                    <i-button  v-if="isVisiable('statewizardpanel_form_cancel','FINISH')" @click="onClickFinish('statewizardpanel_form_cancel')" type="primary" long>{{$t('app.wizardPanel.complete')}}</i-button>
                </div>
            </div>
        </el-popover>
        <drawer class="app-state-wizard-drawer" :closable="false"  :value="drawerOpenStatus.isOpen && drawerOpenStatus.formName == 'statewizardpanel_form_cancel'"
        :width="600"  title="wizard" @on-visible-change="onVisibleChange($event)">
            <view_statewizardpanel_form_cancel
            :key="'statewizardpanel_form_cancel'" 
            :viewState='wizardState'
            :context="context"
            :viewparams="viewparams"
            updateAction="Get"
            removeAction=""
            loadAction="Get"
            @save="statewizardpanel_form_cancel_save" 
            @load="statewizardpanel_form_cancel_load" 
            name='statewizardpanel_form_cancel' 
            ref='statewizardpanel_form_cancel'>
            </view_statewizardpanel_form_cancel>
        </drawer>
    </layout> 
